<template>
  <!-- nav S-->
  <div class="index-nav-bar">
    <van-nav-bar :fixed="true">
      <!-- <template #left>
        <div class="menu-button"
             @click="show = true">
          <div class="bar"></div>
          <div class="bar"></div>
          <div class="bar"></div>
        </div>
      </template> -->
      <template #title>
        <div class="app-nav-bar">
          <img class="app-logo"
               src="/images/index/icon_eplugger_logo.svg" />
          <span>高校科研创新平台</span>
        </div>
      </template>
    </van-nav-bar>
  </div>
  <!-- nav E-->

  <pop :opened="opened"
       position="left"
       :style="{ height: '100%', width: '70%' }">
    <template #content>

      <div class="role-description">
        <div class="nav-space"></div>
        <div class="role-select-logo"></div>
        <div class="role-select-content">
          <div>角色切换</div>
          <div>您是多角色用户请点击下方确定您的登录角色</div>
        </div>
      </div>
      <div class="bscroll-wrapper"
           ref="rolesWrapper">
        <div class="role-select-roles">
          <van-cell :title="role.roleName"
                    clickable
                    v-for="role in roleList"
                    :key="role.roleCode"
                    class="role"
                    :class="role.roleCode === currentRoleCode ? 'active' : 'unActive' "
                    @click="changeRole(role)">
          </van-cell>
        </div>
      </div>
    </template>
  </pop>
</template>

<script>
import Pop from '@/components/Pop.vue'
import { toRefs, reactive, ref, provide } from 'vue'
import { Toast } from 'vant'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css/pagination'
import 'swiper/css'
import usebScroll from '@/hooks/usebScroll'
import { Navigation, Pagination, Scrollbar, A11y } from 'swiper'
// 左侧弹出层依赖
const useLeftPop = () => {
  const popState = reactive({
    show: false
  })
  // 角色列表
  const roleList = reactive([
    { roleName: '科研人员', roleCode: '1' },
    { roleName: '科研助理', roleCode: '2' },
    { roleName: '科技处管理员', roleCode: '3' },
    { roleName: '平台负责人', roleCode: '4' },
    { roleName: '医务处管理员', roleCode: '5' },
    { roleName: '教务处管理员', roleCode: '6' },
    { roleName: '人力资源处管理员', roleCode: '7' },
    { roleName: '用章管理员', roleCode: '8' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
    { roleName: '神经外科研究所管理员', roleCode: '9' },
  ])
  // 当前选择角色
  const currentRoleCode = ref('1')
  // 角色切换
  const changeRole = (role) => {
    currentRoleCode.value = role.roleCode
    Toast.success(`切换为 \n ${role.roleName}`)
  }
  return {
    popState,
    roleList,
    currentRoleCode,
    changeRole
  }
}
export default {
  components: {
    Pop,
    Swiper,
    SwiperSlide
  },
  setup () {
    const { popState, roleList, currentRoleCode, changeRole } = useLeftPop()
    const rolesWrapper = ref('rolesWrapper')
    const $scroll = usebScroll()
    provide('popState', popState)
    const opened = () => {
      $scroll.initOrRefreshBScroll(rolesWrapper.value)
    }
    return {
      ...toRefs(popState),
      roleList,
      currentRoleCode,
      changeRole,
      modules: [Navigation, Pagination, Scrollbar, A11y],
      rolesWrapper,
      opened
    }
  }
}
</script>

<style scoped>
.index-nav-bar {
  height: 44px;
}
.role-select-wrap {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: flex-start;
  align-items: flex-start;
  height: 100vh;
}
.menu-button {
  position: absolute;
  top: 0px;
  left: 0px;

  padding: 15px;

  cursor: pointer;

  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.menu-button .bar:nth-of-type(1) {
  margin-top: 0px;
}

.menu-button .bar:nth-of-type(3) {
  margin-bottom: 0px;
}

.bar {
  position: relative;
  display: block;
  width: 18px;
  height: 3.9px;
  margin: 3px auto;
  background-color: #fff;
  border-radius: 10px;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}

.menu-button:hover .bar:nth-of-type(1) {
  -webkit-transform: translateY(1.5px) rotate(-4.5deg);
  -ms-transform: translateY(1.5px) rotate(-4.5deg);
  transform: translateY(1.5px) rotate(-4.5deg);
}

.menu-button:hover .bar:nth-of-type(2) {
  opacity: 0.9;
}

.menu-button:hover .bar:nth-of-type(3) {
  -webkit-transform: translateY(-1.5px) rotate(4.5deg);
  -ms-transform: translateY(-1.5px) rotate(4.5deg);
  transform: translateY(-1.5px) rotate(4.5deg);
}

.app-nav-bar {
  display: flex;
  flex-direction: row;
  align-content: center;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.role-description {
  padding: 20px 24px 12px;
  background-image: linear-gradient(
    to bottom,
    rgb(64 115 245),
    rgb(142 176 209 / 0%) 37%,
    rgba(244, 246, 248, 0) 77%,
    rgb(236 241 254) 94%
  );
}

.role-select-logo {
  width: 137px;
  height: 83px;
  background-image: url(../images/index/icon-role-select.svg);
  background-size: contain;
}

.role-select-content > div:nth-child(1) {
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-top: 16px;
  color: #222222;
}

.role-select-content > div:nth-child(2) {
  font-size: 12px;
  margin-top: 6px;
  color: #666666;
}

.role-select-roles {
  width: 100%;
  /* max-height: calc(100vh - 44px - 100px); */
  /* overflow: scroll; */
}

.app-logo {
  width: 26px;
  height: 26px;
  margin-right: 8.99px;
}
.role {
  font-size: 14px;
  color: #222;
  line-height: 20px;
  font-weight: bold;
}

.active {
  background: #ecf1fe;
  color: #4073f5;
}

.unActive {
}
</style>